{% extends "base/front.html" %}

{% block title %}用户{% endblock %}

{% block head %}
<style type="text/css">
.bg {
	display: table;
	width: 100%;
	height: 100%;
	padding: 50px 0;
	text-align: center;
	color: #fff !important;
	
	background-color: #000;
	background-size: cover;
}
fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid #009;border-radius:5px;}
legend{padding:.5em;border:0;width:auto}

</style> 
{% endblock %}

{% block AlternateDiagram %}
    {% set data = g.api.user_get_one_profile(user).data %}
    <div class="bg" style="background: url({{ data.cover }}) no-repeat top center;">
		<div class="col-md-4 column">
		  	<a href="javascript:ShowAvatar('{{ data.avatar }}')"><img id="avatar" src="{{ data.avatar or 'https://img.saintic.com/EauDouce/avatar/default.jpg' }}" class="img-thumbnail" style="display: block; max-height: 200px" /></a>
		  	<p class="text-left">
                <i class="icon-user icon-1x">&nbsp;</i><attr title="{{ data.motto or '' }}">{{ data.cname or data.username }}</attr><br/>

                {% if data.get('gender') == '男' %}
                    <i class="icon-time icon-1x">&nbsp;</i>A handsome boy Joined on {{ data.get('time') }}
                {% elif data.get('gender') == '女' %}
                    <i class="icon-time icon-1x">&nbsp;</i>A pretty girl Joined on {{ data.get('time') }}
                {% else %}
                    <i class="icon-time icon-1x">&nbsp;</i>Joined on {{ data.get('time') }}
                {% endif %}
                <br/>

                {% if data.get('url') %}
                    <i class="icon-link icon-1x">&nbsp;</i>我的网址: <a href="{% if 'http' in data.get('url') %}{{ data.get('url') }}{% else %}{{ 'http://' + data.get('url') }}{% endif %}" target="_blank">{{ data.get('url') }}</a><br/>
                {% endif %}

                {% if data.get('email') %}
                    <i class="icon-envelope icon-1x">&nbsp;</i>我的邮箱: <a href="mailto:{{ data.get('email') }}">{{ data.get('email') }}</a><br/>
                {% endif %}

                {% if data.get('weibo') %}
                    <i class="icon-twitter-sign icon-1x">&nbsp;</i>我的微博: <a href="{% if 'http' in data.get('weibo') %}{{ data.get('weibo') }}{% else %}{{ 'http://' + data.get('weibo') }}{% endif %}" target="_blank">{{ data.get('weibo') }}</a><br/>
                {% endif %}

                {% if data.get('github') %}
                    <i class="icon-github icon-1x">&nbsp;</i>我的代码: <a href="{% if 'http' in data.get('github') %}{{ data.get('github') }}{% else %}{{ 'http://' + data.get('github') }}{% endif %}" target="_blank">{{ data.get('github') }}</a><br/>
                {% endif %}

                <i class="icon-link icon-1x">&nbsp;</i>个性地址: {{ request.url_root.strip('/') + url_for('front.userHome', user=user)  }}<br/>
            </p>
		</div>
		<div class="col-md-4 column">
		</div>
        <div class="col-md-4 column">
            {% if g.signin and g.username == data.username %}
            <br><br><br><br>
            <fieldset>
                <a name="Setting"></a>
                <legend><small class="text-default text-lowercase">个人设置</small></legend>
                <div>
                    <a href="javascript:ChangerAvater()" class="btn btn-warning btn-lg btn-block active" role="button">修改头像</a>
                    <a href="javascript:ChangerPassword()" class="btn btn-danger btn-lg btn-block active" role="button">修改密码</a>
                    <a href="javascript:ChangerCover()" class="btn btn-success btn-lg btn-block active" role="button">修改封面</a>
                    <a href="#" class="btn btn-info btn-lg btn-block active" role="button">修改个人资料</a>
                </div>
            </fieldset>
            {% endif %}
        </div>
    </div>
    <br/>
    <div>
        <a name="blog"></a>
		{% for blog in g.api.blog_get_user_blog(user).data %}
        <blockquote>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<p class="text-left">
						<a href="{{ url_for('front.blogShow', bid=blog.id) }}" style="color: blue; font-weight: bold;">{{ blog.title }}</a>
					    <small><i class="icon-user icon-1x"></i><a href="{{ url_for('front.userHome', user=blog.author) }}" title="由 {{ blog.author }} 发布" style="color: #999">&nbsp;{{ blog.author }}</a>&nbsp;</small>
					    <small><i class="icon-calendar icon-1x"></i><scan style="color: #999">&nbsp;{{ blog.create_time }}</scan>&nbsp;</small>
					    {% if blog.tag %}
					    <small><i class="icon-tag icon-1x"></i>
					    {% for tag in blog.tag.split() %}
					        <a href="{{ url_for('front.blogResource', resource_type='tag', resource_data=tag) }}" title="查看 {{ tag }} 标签中所有文章" style="color: #999">{{ tag }}</a>&nbsp;
					    {% endfor %}
					    </small>
					    {% endif %}
					</p>
				</div>
			</div>
	    </blockquote>
		{% endfor %}
	</div>
{% endblock %}

{% block PathNavigation %}{% endblock %}

{% block notice %}{% endblock %}

{% block search %}{% endblock %}

{% block aside %}{% endblock %}

{% block container %}{% endblock %}

{% block script %}
<script type="text/javascript">
{% if g.username == user %}
// iframe层显示更改头像弹窗
function ChangerAvater() {
    layer.open({
        type: 2,
        title: '更换头像',
        shadeClose: true,
        shade: 0.8,
        area: ['300px', '260px'],
        content: '{{ url_for("front.userChangeAvater") }}'
    });
}

// iframe层显示更改密码弹窗
function ChangerPassword() {
    layer.open({
        type: 2,
        title: '修改密码',
        shadeClose: true,
        shade: 0.8,
        area: ['300px', '360px'],
        content: '{{ url_for("front.userChangePassword") }}'
    });
}

// iframe层显示更改封面弹窗
function ChangerCover() {
    layer.open({
        type: 2,
        title: '更换封面',
        shadeClose: true,
        shade: 0.8,
        area: ['300px', '260px'],
        content: '{{ url_for("front.userChangeCover") }}'
    });
}
{% endif %}

//页面层-显示头像
function ShowAvatar(imgUrl) {
    var img = new Image();
    img.src=$("#avatar")[0].src;
    img.onload = function(){
        console.info("分析图片"+img.src+",宽为"+img.width+",高为"+img.height);
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            area: [img.width, img.height],
            content: '<img src="' + imgUrl +'" />'
        });
    }
}
</script>
{% endblock %}